{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div style="
  color: #000000;
  font-weight: 300;
  line-height: 1.4;
  font-size: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
">
  <div style="
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
  ">
    {{!-- STATE --}}
    <span title="{{state}}" class="badge {{stateClass}}" style="min-width: auto;font-size: inherit;"></span>

    {{!-- ID - NAME --}}
    <span>#{{ id }} - {{ name }}</span>

    {{!-- SERVICE --}}
    {{#if service }}
    <span>(Part of: {{ service.NAME }})</span>
    {{/if}}
  </div>


  {{!-- START TIME --}}
  <div>
    <span>Started on: {{ humanizeTime start_time }}</span>
  </div>

  {{!-- NETWORKS --}}
  {{#ifEquals networks.length 0 }}
  {{!-- dont render when if 0 --}}
  {{else}}
  <div>
    {{#ifEquals networks.length 1 }}
    <span>
      {{#each networks}} {{#if @first}} {{ this }} {{/if}} {{/each}}
    </span>
    {{else}}
    <ul class="dropdown-menu-css">
      <li>
        <a style="color: #000000">
          {{#each networks}} {{#if @first}} {{ this }} {{/if}} {{/each}}
        </a>
      </li>
      <li class="menu-hide upper" style="right: 0;">
        <ul>
          {{#each networks}}
          <li>
            <p title="{{this}}" style="
              margin:0;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              {{#contains this '*'}} padding-left:1em; {{/contains}}
            ">
              {{ this }}
            </p>
          </li>
          {{/each}}
        </ul>
      </li>
    </ul>
    {{/ifEquals}}
  </div>
  {{/ifEquals}}
</div>